<template>
  <div class="right-user-info p-1">
    <div v-if="Object.keys(store.getUserInfoGetters).length > 0 && store.token">
      <!-- 用户信息 -->
      <user-info/>
    </div>
    <div v-else class="no-login flex flex-col items-center justify-center text-center p-10">
      <span class="mt-4 mb-4">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</span>
      <YuButton @click="showPopup">用户登录</YuButton>
    </div>
  </div>
</template>

<script setup>
import { useStore } from "@/store/index"

import YuButton from '@/components/YuButton/index.vue'
import UserInfo from '@/components/UserInfo/index.vue'

const store = useStore()


// 点击登录
const showPopup = () => {
  // 获取key值并且通过key,获取验证码并且，循环调用校验是否扫码确认成功，最后获取用户信息
  store.getKey()
  store.loginPopup = true
}


</script>

<style scoped>

</style>
